<template>
  <div class="container">
    <h2>基础折线图</h2>
    <div class="chart-container">
      <div id="basicLineChart" style="height:500px"></div>
    </div>
  </div>
</template>

<script>
import themeJson from "@/utils/theme/theme.json"; // json数据引入

export default {
  name: "basicLineChart",
  data() {
    return {
      option: {
        title: {
          text: "Title: 基本折线图 ",
          textStyle: {
            color: "blue",
          },
          subtextStyle: {
            // 副标题
            color: "blue",
          },
        },
        // 提示框组件
        tooltip: {
          trigger: "axis", // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          show: true, // 是否显示直角坐标系 网格
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            smooth: true, // 是否平滑曲线显示
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            label: {
              show: true,
              position: "bottom",
            },
            // 标记的图形
            markPoint: {
              data: [
                {
                  type: "max", // 最大值 标记
                  name: "最大值",
                },
                {
                  type: "min", // 最小值 标记
                  name: "最小值",
                },
              ],
              symbol: "pin", // 标记样式
            },
            // 标记线
            markLine: {
              data: [
                {
                  type: "average", // 平均值
                },
              ],
              silent: true,
            },
          },
        ],
      },
    };
  },
  mounted() {
    // 自定义主题
    this.$echart.registerTheme("theme", themeJson);
    this.getLineChart();
  },
  methods: {
    // 设置折线图
    getLineChart() {
      this.lineChart = this.$echart.init(
        document.getElementById("basicLineChart"), 'theme' // 第二个参数
      );
      this.lineChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less">
.chart-container {
  canvas {
    // width: 200px !important;
  }
}
</style>